<template>
    <div>
        <el-container style="height: 720px;margin: auto auto">
            <el-header>
                <div class="title">城市智能公交车系统</div>
                <div class="user">
                    <div class="userSex">
                        管理员:admin
                    </div>
                    <div class="userSex">
                        退出到前台
                    </div>
                    <div class="userSex">
                        退出登录
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside style="width: 210px">
                    <el-menu
                            @select="selectLuyou"
                            :default-active="luyou"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b" router unique-opened>
                        <el-menu-item index="/homeTest">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>前台管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/addrotation">修改前台轮播图</el-menu-item>
                                <el-menu-item index="/updateContext">修改前台公告</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="/getEmail">查看投诉邮件</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="/activity">活动管理</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-menu-item index="/qiantai">用户管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="/dataMap">
                            <i class="el-icon-truck"></i>
                            <span slot="title">各地数据</span>
                        </el-menu-item>
                        <el-menu-item index="/busInformation">
                            <i class="el-icon-truck"></i>
                            <span slot="title">公交车管理</span>
                        </el-menu-item>
                        <el-submenu index="">
                            <template slot="title">
                                <i class="el-icon-map-location"></i>
                                <span>路线站点管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/routeInformation">
                                    <i class="el-icon-location"></i>
                                    公交线路
                                </el-menu-item>
                                <el-menu-item index="/sitesInformation">
                                    <i class="el-icon-wind-power"></i>公交站点
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="7-7">
                            <template slot="title">
                                <i class="el-icon-map-location"></i>
                                <span>司机管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/driversa">
                                    <i class="el-icon-location"></i>
                                    薪资管理
                                </el-menu-item>
                                <el-menu-item index="/PunishmentManagement">
                                    <i class="el-icon-wind-power"></i>处罚管理
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

<!--                        <el-menu-item index="/routeInformation">-->
<!--                            <i class="el-icon-truck"></i>-->
<!--                            <span slot="title">线路管理</span>-->
<!--                        </el-menu-item>-->

                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view/>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                isCollapse: true,
                luyou:'/homeTest'
            }
        },
        created() {
        },
        mounted(){
            this.luyou = this.$route.path;
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            menuClick(index){
                this.$router.push(index);
            },
            selectLuyou(){
                console.log(this.luyou);
            }

        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
    }



    .el-main {
        color: #333;

    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        /*min-height: 400px;*/
        height: 100%;

    }



    .title{
        margin-left: 0px;
        font-size:30px;
        font-family: 华文行楷;
        color: white;

    }
    .user{
        display: flex;
    }

    .userSex{
        margin-right: 10px;
        margin-left: 10px;
        font-size: small;
        cursor: pointer;
    }





</style>
